import React from "react";
import { Button, Space } from "antd";

interface Option {
  label: string;
  value: number | string;
}
interface Props {
  options: Option[];
  value?: any;
  onChange?: any;
  disabled?: boolean;
}

const ButtonRadioGroup: React.FC<Props> = ({options = [], value, onChange, disabled}) => {
  const isChecked = (val: any) => {
    return value === val.value;
  }

  const onSelected = (item: Option, index: number) => {
    if (disabled) {
      return ;
    }
    onChange(item, index)
  }

  return (
    <Space.Compact block>
      {
        options?.map((v: any, i: number) => 
          <Button
            onClick={() => onSelected(v, i)} 
            disabled={!isChecked(v) && disabled}
            type={isChecked(v) ? 'primary' : 'default'}
            key={v.value} 
          >
            {v?.label}
          </Button>
        )
      }
    </Space.Compact>
  );
}
export default ButtonRadioGroup;